<template>
	<view>
		<view class="change_btn_c">
			<view class="change_btn" @tap="changeStatusC">
				<view>修改用户信息</view>
			</view>
			<view class="user_info">
				<view class="user_info_line">
					<text>头像</text>
					<!-- 未点击更改用户信息时，显示的 -->
					<view v-if="!status.isChangBtnShow" class="user_image_c">
						<!-- 当有信息时显示头像 -->
						<image v-show="userInfo" @click="imageClick" :src="userInfo.icon" mode="widthFix"></image>
					</view>
					<!-- 点击更改用户头像 -->
					<view v-if="status.isChangBtnShow" class="changeUserImage" @tap="changeUserImage">
						点击更换头像
					</view>
				</view>
				<view class="user_info_line">
					<text>用户名</text>
					<input type="text" v-model="userInfo.username" :disabled="!status.isChangeStatus" />
				</view>
				<view class="user_info_line">
					<text>昵称</text>
					<input type="text" v-model="userInfo.nickname" :disabled="!status.isChangeStatus" />
				</view>
				<view class="user_info_line">
					<text>手机号</text>
					<input type="text" v-model="userInfo.phone" :disabled="!status.isChangeStatus" />
				</view>

			</view>
			<LoadingButton v-if="!status.isChangeStatus" :isLoadingS="isLoading" titleS='退出登陆' @loginClickS='loggedOut'></LoadingButton>
			<LoadingButton v-else :isLoadingS="isLoading" titleS='更新' @loginClickS='updateUserInfo'></LoadingButton>

<!-- 			<view class="sub" v-else @tap="updateUserInfo">
				更新
			</view> -->
		</view>
	</view>
</template>

<script>
	import checkUserLogin from '../../mixin/check_user_login.js';
	import request from '../../api/request.js';
	import LoadingButton from '../../components/common/loadingButton.vue'
	export default {
		data() {
			return {
				// 状态
				status: {
					// 是否在编辑状态
					isChangeStatus: false,
					// 增加一个头像是否可以被点击更改的状态
					isUserImageCanChange: false,
					// 控制修改按钮的显示，只有第一次点击修改用户信息时显示。
					isChangBtnShow: false
				},
				userInfo: {},
				isLoading: false
			}
		},
		components: {
			LoadingButton
		},
		methods: {
			changeStatusC() {
				this.status.isChangeStatus = true;
				this.status.isChangBtnShow = true;
			},
			// 更改用户头像
			changeUserImage() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					success: function(res) {
						_this.userInfo.icon = res.tempFilePaths[0];
						_this.status.isChangBtnShow = false;
					}
				})
			},
			imageClick() {
				if (this.isChangeStatus) {
					this.changeUserImage()
				}
			},
			// 更新用户信息
			async updateUserInfo() {
				this.isLoading = true;
				const res = await request({
					url: "/member/updateMemberInfo",
					data: this.userInfo,
					method: "POST"
				});
				if (res.data.success) {
					uni.showToast({
						title: '更新成功，请重新登陆',
						success() {
							setTimeout(() => {
								this.isLoading = false
								uni.navigateTo({
									url: '../login/login'
								})
							}, 1500)
						}
					})
				}
			},
			// 退出登陆
			loggedOut() {
				this.isLoading = true;
				uni.removeStorageSync("token");
				uni.showToast({
					title: '退出成功，1s后跳转到登陆页面',
					success: function() {
						setTimeout(() => {
							this.isLoading = false;
							uni.navigateTo({
								url: '../login/login'
							})
						}, 1500)
					}
				})
			}
		},
		mixins: [checkUserLogin],
		async onShow() {
			this.isLoading = false
			const res = await checkUserLogin.checkUserLogin()
			if (res) {
				const userInfo1 = await request({
					url: '/login/getMemberInfo'
				})

				this.userInfo = userInfo1.data.data.userInfo;
			} else {
				this.userInfo = null
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './changeUserInfo.scss';
</style>
